<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>	
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Ahorro</title>
<style type="text/css">
h3{
color:#F56600;
text-transform:Capitalize;

}
h4{
font-size:15px;
}

</style>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<!-- end -->


<!--  Core jQuery  -->

<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<!--  Donut -->

<script type="text/javascript" src="scripts/jquery.donutchart.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<![endif]-->
<!--  jQuery UI-->
<script type="text/javascript" src="scripts/ui/jquery-ui-1.8.21.custom.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.core.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.widget.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.button.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.sortable.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.progressbar.js"></script>
</head>
<body>
<div>
	<div>
	
		<!-- grupo -->
		<h2 style="border-bottom:1px solid #ddd;">Campos de texto</h2>
		<div style="margin-left:2em">
		<p>Partiremos del template de Marca segun corresponda <bk_input></bk_input></p>	
		<h3>propiedades Comunes</h3>
		<br/><br/>	
		
		<!-- elemento-->
		<h4>enlace</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>font-family:Verdana;</td></tr>
		<tr><td>font-weight:normal;</td></tr>
		<tr><td>font-size:12px;</td></tr>
		<tr><td>text-decoration: underline;</td></tr>
		<tr><td>color:#ff7010;</td></tr>
		</table>
		<br/><br/>
		<h3>Ejemplo</h3>
		<a href="#" class="texto_recomendaciones enlace">Enlace</a>
		<!-- elemento-->
		<h4>enlace con icono</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Compuesto</td></tr>
		</table>
		<br/><br/>
		<h3>Ejemplo</h3>
		
		<div style="float:left;">
			<div class="enlace-icono icono-pdf" style="float:left"></div>		
			<a href="#" class="texto_recomendaciones enlace" >Enlace con icono PDF</a>					
		</div>		
		<br/><br/>
		<div style="float:left;">
			<div class="enlace-icono icono-imprimir" style="float:left"></div>		
			<a href="#" class="texto_recomendaciones enlace" >Enlace con icono Imprimir</a>					
		</div>		
		<!-- elemento-->
		<h4>enlace con icono info</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Compuesto</td></tr>
		</table>
		<br/><br/>
		<h3>Ejemplo</h3>
		
		<div style="float:left;">
			<div class="enlace-info icono-info" style="float:left"></div>&nbsp;		
			<div class="enlace-contenido">
			<a href="#" class="texto_recomendaciones enlace" >Enlacesd asdf asdf asdf asdf asdf con</a>					
			</div>
			<div style="clear:both;"></div>	
		</div>		
		<div style="clear:both;"></div>
	<!-- elemento-->
		<h4>boton con enlace</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Compuesto</td></tr>
		</table>
		<br/><br/>
		<h3>Ejemplo </h3>
		<!-- plantilla -->
		<div class="buttonSmall buttonStd">			
			<a href="#" class="texto_recomendaciones enlace">Enlace</a>
		</div>
		<div style="clear:both;"></div>
		<!-- plantilla -->
		<br/>
		<h4>boton con enlace con icono</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Compuesto</td></tr>
		</table>
		<code>Dudo de si el enlace tiene que ser todo el boton(lo logico) este comportamiento, lo podriamos montar en jquery, controlando el evento over, del contenedor y cambiarle el estilo al resto de elementos hijos, o por el contrario se requiere de	l efecto visual y que tanto el boton como el enlace  se comporten de la misma manera.</code>
		<br/><br/>
		<h3>Ejemplo</h3>
		<p>Icono Editar</p>
		<!-- plantilla -->
		<div class="buttonSmall buttonIcono">	
				<div class="button-icono tipo-editar-modificar"></div>
				<a href="#" class="texto_alertas enlace">Modificar <br/>meta</a>
		</div>
		<div style="clear:both;"></div>
		<!-- plantilla -->

		<p>Icono Cerrar</p>		
		<!-- plantilla -->
		<div class="buttonSmall buttonIcono">	
				<div class="button-icono tipo-condiciones"></div>
			<a href="#" class="texto_alertas enlace">Cerrar<br/>meta</a>
		</div>
		<div style="clear:both;"></div>
		<!-- plantilla -->
		<p>Icono Condiciones</p>
		<!-- plantilla -->
		<div class="buttonSmall buttonIcono">	
				<div class="button-icono tipo-cerrar"></div>
			<a href="#" class="texto_alertas enlace">Ver<br/>condiciones</a>
		</div>
		<div style="clear:both;"></div>
		<!-- plantilla -->
		
	</div>
	<!-- plantilla -->
			


</div>	
	
</body>
</html>